<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户--编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css">


    <script src="/manage/js/app.js"></script>
</head>
<body>

<style>
    .layui-form-item .layui-input-inline {
        width: 300px;
    !important;
    }
</style>


<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

    <div class="layui-form-item">
        <label class="layui-form-label">位置</label>
        <div class="layui-input-inline ">
            <select id="position" name="position" lay-verify="" lay-filter="required">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">描叙</label>
        <div class="layui-input-inline">
            <input type="text" id="desc" name="desc" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <span class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-danger" id="test7" style="width: 180px"><i class="layui-icon"></i>上传Banner图片</button>
            <!-- 预览图,上传图片后展示 --><!--圆  style='border-radius: 30px;width: 35px;height: 35px;'-->
            <img src="" title="" id="imgUrlShow" style="height: 180px; margin-top: 5%">
            <!-- 隐藏input,最后添加数据 -->
            <input type="text" id="imgUrl" name="imgUrl" lay-verify="imgHead" placeholder="请输入" autocomplete="off" hidden>
        </span>
        <!-- 提示 -->
        <font class="layui-word-aux">
            banner 图片必须小于 2M
        </font>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否跳转</label>
        <div class="layui-input-inline ">
            <select id="isSkip" name="isSkip" lay-verify="" lay-filter="required">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">跳转地址url</label>
        <div class="layui-input-inline">
            <input type="text" id="skipUrl" name="skipUrl" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" id="sort" name="sort" lay-verify="required" value="0" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script>
    layui.use(['form', 'upload'], function () {
        formSubmit();
        init();
        upload();
    });


    function formSubmit() {
        //监听提交
        layui.form.on('submit(layuiadmin-app-form-submit)', function (data) {
            let result = Ajax.put(parent.bannerUrl + "/" + parent.data.id, data.field);
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.layer.msg(result.msg);
            //重载表格
            parent.xijiaRenderTable();
        });
    }


    function init() {
        <!-- 父页面的值,赋值到当前页 -->
        $('#name').val(parent.data.name);
        $('#desc').val(parent.data.desc);
        $('#imgUrl').val(parent.data.imgUrl);
        $('#sort').val(parent.data.sort);
        $('#disable').val(parent.data.disable);
        $('#isSkip').val(parent.data.isSkip);
        $('#skipUrl').val(parent.data.skipUrl);
        // 显示图片
        $("#imgUrlShow").attr("src", parent.data.imgUrl);
        $("#imgUrlShow").attr("title", parent.data.imgUrl);
        // select 字典数据
        $("#isSkip").html(Dict.getDictSelect(Enums.Base.BannerIsSkip));      // 是否跳转  不带默认值
        $("#position").html(Dict.getDictSelect(Enums.Admin.BannerPosition));  // 位置
        // select 回显
        $("#isSkip").find("option").each(function () {
            if ($(this).val() == parent.data.isSkip) {
                $(this).attr("selected", "selected");
            }
        });
        // select 回显
        $("#position").find("option").each(function () {
            if ($(this).val() == parent.data.position) {
                $(this).attr("selected", "selected");
            }
        });
        // 刷新,否则select可能不生效
        layui.form.render();
    }


    function upload() {
        //文件上传--设定文件大小限制
        layui.upload.render({
            elem: '#test7'
            , url: uploadPath + '?filePath=image/banner/' //改成您自己的上传接口
            , size: 2048 //限制文件大小，单位 KB
            , headers: {"TOKEN": getGlobalHeaders()}
            , done: function (res) {
                //如果上传失败
                if (res.code !== 200) {
                    return layer.msg('上传失败-' + res.msg);
                }
                // 显示图片
                $("#imgUrlShow").attr("src", res.data);
                $("#imgUrlShow").attr("title", res.date);
                $("#imgUrlShow").show();
                // 赋值input
                $("#imgUrl").val(res.data);
                console.log(res);
                layer.msg('上传成功');
            }
        });
    }
</script>
</body>
</html>